<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郝珍华">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        .nav {

            height: 50px;

            background-color: gray;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {

            float: left;

            margin-left: 70px;
        }

        span {
            color: white;
            font-size: 20px;
            line-height: 50px;
        }

        .kuang {
            border: 1px solid gray;

            display: none;
        }

        .kuang p {
            color: gray;
            margin-left: 10px;
        }

        a {
            text-decoration: none;
            font-size: inherit;
            color: inherit;
        }

        .container {
            width: 1170px;

            margin-left: 650px;
        }

        .clearfix::after {
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <nav class="nav">
        <div class="container">
            <ul class="clearfix">
                <li>
                    <span><a href="#">公司简介</a></span>
                    <div class="kuang">
                        <p><a href="#">发展历史</a></p>
                        <p><a href="#">发展历史</a></p>
                        <p><a href="#">发展历史</a></p>

                    </div>
                </li>
                <li>
                    <span><a href="#">产品简介</a></span>
                    <div class="kuang">
                        <p><a href="#">发展历史</a></p>
                        <p><a href="#">发展历史</a></p>
                        <p><a href="#">发展历史</a></p>

                    </div>
                </li>
                <li>
                    <span><a href="#">联系我们</a></span>
                    <div class="kuang">
                        <p><a href="#">发展历史</a></p>
                        <p><a href="#">发展历史</a></p>
                        <p><a href="#">发展历史</a></p>

                    </div>
                </li>
                <li>
                    <span><a href="#">人才招聘</a></span>
                    <div class="kuang">
                        <p><a href="#">发展历史</a></p>
                        <p><a href="#">发展历史</a></p>
                        <p><a href="#">发展历史</a></p>

                    </div>
                </li>

            </ul>
        </div>
    </nav>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    var lis = $('ul').children('li');
    var span = $('li>span').children('a');
    var kuang = $('.kuang');
    var p = $('.kuang>p').children('a');
    var index = 0;
    lis.hover(function () {
        var count = lis.index(this);
        span.eq(count).css('color', 'red').css('text-decoration', 'underline');
        kuang.eq(count).css('display', 'block');
        p.hover(function () {
            $(this).css('text-decoration', 'underline');
            span.css('color', 'white').css('text-decoration', 'none');
        }, function () {
            $(this).css('text-decoration', 'none');
        })
    }, function () {
        kuang.css('display', 'none');
        span.css('color', 'white').css('text-decoration', 'none');
    });


    // $(".nav li").hover(
    //     function () {
    //         $(this).children(".kuang").css('display', 'block');
    //         $(this).children("span").css('color', 'red'); 
    //     },
    //     function () {
    //         $(this).children(".kuang").css('display', 'none');
    //         $(this).children("span").css('color', 'white');

    //     })

</script>